<template>
  <div class="register_div">
    <div class="from">
      <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="formLabelAlign"
          status-icon
          :rules="rules"
          style="max-width: 90%;height:90%;margin-top: 5%"
      >
        <el-form-item label="name" prop="name">
          <el-input v-model="formLabelAlign.name" placeholder="必填"/>
        </el-form-item>
        <el-form-item label="password" prop="pwd">
          <el-input v-model="formLabelAlign.pwd" type="password" show-password placeholder="必填"/>
        </el-form-item>
        <el-form-item label="rePassword" prop="rePwd">
          <el-input v-model="formLabelAlign.rePwd" type="password" show-password placeholder="必填"/>
        </el-form-item>
        <el-row justify="space-evenly" style="top: 5%">
          <el-button size="large" style="width: 120px" @click="register()">注册</el-button>
          <el-button size="large" style="width: 120px" @click="clear('Home')">取消</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {Login, Register} from "@/api";
import {ElMessage} from "element-plus";
import router from "@/router";
import {UserLoginStore} from "@/stores/counter";
import {UserInfoStore} from "../../stores/csms";

const formLabelAlign = reactive({name: '', pwd: '', rePwd: ''})
const labelPosition = ref('left')
const store = UserLoginStore()

// 表单规则
const rePwdToPwd = (rule, value, callback) => {
  let pwd = formLabelAlign.pwd;
  let rePwd = formLabelAlign.rePwd;
  if (value.length >= 7 && value.length <= 16){
    if (pwd === rePwd){
      callback()
    }else {callback(new Error("与第一次输入的密码不一致"))}
    callback()
  } else {callback(new Error("长度应在7-16！"))}
}
const rules = reactive({
  name:[{required: true,message: '请输入名称',trigger: 'blur'},
    {min: 3, max: 8, message: "用户名称长度为3-8", trigger: 'blur'}],
  pwd: [{required: true, message: "请输入密码！", trigger: 'blur'},
    {min: 7, max: 16, message: "密码长度为7-16", trigger: 'blur'}],
  rePwd: [{required: true, message: "请再次输入密码!", trigger: 'blur'},
    {validator: rePwdToPwd, trigger: 'blur'}]
})

// 注册
function register() {
  let username = formLabelAlign.name
  let password = formLabelAlign.pwd
  let user = {username, password}
  Register(user).then((res) => {
    console.log(res)
    const message = res.data.message
    if (message === '注册成功') {
      sessionStorage.setItem('username', username)  // 将用户名存入session中，以便判断用户是否登录
      ElMessage({message: message, type: 'success',showClose: true})
      Login(user).then((date) => {
        console.log(date)
        let messageLogin = date.data.message
        let token = date.data.data
        if (date.data.message === '登录成功') {
          ElMessage({message: messageLogin, type: 'success',showClose: true})
          localStorage.setItem('token', token)
          store.loginStatus = true
          router.replace({name: 'Home'})
        }
        else {
          ElMessage({message: messageLogin, type: 'error',showClose: true})
          router.replace({name: 'Login'})
        }
      })
    }
    else {
      ElMessage({message: message, type: 'error',showClose: true})
    }
  })
}
</script>

<style scoped>
.from{
  width: 500px;
  height: 300px;
  padding-left: 3%;
  margin-left: 32%;
  margin-top: 10%;
  border: 1px solid #c9c4c4;
  border-radius: 40px;
  box-shadow: 4px 4px 4px #e0dbdb;
}
</style>
